<template>
	<view class="bg">
		<view class="biaodan">
			<view>
				<input type="text" placeholder="请输入您的电话号码" v-model="phone" />
			</view>
			<view>
				<input type="text" placeholder="请输入用户名,最少2位" v-model="username" />
			</view>
			<view>
				<input type="password" placeholder="密码,最少5位" v-model="userpwd" />
			</view>
			<view>
				<button @click="logins">注册</button>
			</view>
			<view class="text"  > <text @click="toEnroll">登录</text> </view>
		</view>
	</view>

</template>

<script setup>
	import {
		ref
	} from "vue";
	import {login} from  '@/api/users.js'
	let phone = ref('')
	let username = ref('')
	let userpwd = ref('')
	const logins = () => {
		let phonetel = /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[1589]))\d{8}$/
		
		if(phonetel.test(phone.value)&&username.value.length>1&&userpwd.value.length>4){
			login(username.value, phone.value, '无', userpwd.value).then(res=>{
				if(res.data.code==200){
					uni.navigateTo({
						url:'/pages/enroll/enroll'
					});
				}
			})
		}else{
			uni.showToast({
				title: '格式错啦',
				icon: "error"
			});
		}
	}
	const toEnroll = ()=>[
		uni.navigateTo({
			url:'/pages/enroll/enroll'
		})
	]
</script>

<style lang="scss">
	.bg{
		width: 100vw;
		height: 1000rpx;
		padding-top: 400rpx;
		background-image: url('http://175.178.117.99:8888/down/fGEf9y6dGTEv.png') ;
		background-repeat: no-repeat;
		background-size: 100% 100% ;
	}
.biaodan {
		width: 650rpx;
		margin: 0 auto;
		
		>view {
			width: 650rpx;
			height: 120rpx;
			
		
			input {
				padding-left: 30rpx;
				font-size: 40rpx;
				height: 90rpx;
				line-height: 90rpx;
				border-bottom: 1rpx solid #e8dde5;
				color: #ffffff;
			}
			button{
				background-color: #f50f50;
				color: #ffffff;
			}
			
		}
		.text{
			text-align: right;
			color: #7595ff;
		}


	}
</style>
